<template>
	<view class="content">
		<!-- f1：菜单栏 -->
		<view class="nav">
			<view class="nav-left" @click="handleRevolve">
				<i class="iconfont icon-shuaxin1 refresh" ref="icon"></i>
			</view>
			<view class="tab-wrap">
				<view class="tab-menu">
					<view class="menu-box" :class="activeindex === menuindex? 'active_menu' : ' '"
						@tap="choosemenu(menuindex)" v-for="(menu,menuindex) in menulist" :key="menuindex">
						{{menu}}
					</view>
					<view class="bottom_line" :style="positionStyle"></view>
				</view>

			</view>
			<view class="nav-right">
				<uni-icons type="search" size="22" color="#2c2c2c" @click="jump('../search/search')"></uni-icons>
			</view>
		</view>


		<!-- f2：分类菜单 -->
		<view class="cate">
			<view class="cate-box">
				<text class="cate-item" :class="activeindex2 === cateindex?'active_cate':''"
					@tap="choosecate(cateindex)" v-for="(cate,cateindex) in catelist" :key="cateindex">{{cate}}</text>
			</view>
		</view>

		<!-- f3：社区瀑布流 -->
		<custom-waterfalls-flow :value="list" class="waterfalls" @wapperClick="jump('../detail/detail')"
			@imageClick="jump('../detail/detail')">
			<template v-slot:default="item">
				<view class="item">
					<view class="title">{{item.title}}</view>
					<view class="desc">
						<view class="userInfo">
							<view>
								<image src="../../static/1.jpg" mode="widthFix"></image>
							</view>
							<text class="username">年糕dodo</text>
						</view>
						<view class="like">
							<uni-icons :type="item.isLike?'heart-filled':'heart'" :color="item.isLike?'#f00':'#666'"
								@click="item.isLike=!item.isLike"></uni-icons>
							<text class="count">2.7万</text>
						</view>
					</view>
				</view>
			</template>
		</custom-waterfalls-flow>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeindex: 0,
				activeindex2: 0,
				menulist: ['关注', '发现'],
				positionStyle: null,
				left: 0,
				catelist: ["推荐", "女生", "男生", "视频", "直播", "美食", "穿搭", "美甲", "护肤"],
				list: [{
						image: 'https://via.placeholder.com/200x500.png/ff0000',
						title: '我是标题1',
						isLike: false,
					},
					{
						image: 'https://via.placeholder.com/200x200.png/2878ff',
						title: '我是标题我是标题我是标题我是标题我是标题2',
						isLike: true,
					},
					{
						image: 'https://via.placeholder.com/200x500.png/ff0000',
						title: '我是标题1',
						isLike: false,
					},
					{
						image: 'https://via.placeholder.com/200x200.png/2878ff',
						title: '我是标题2',
						isLike: true,
					}
				]
			}
		},
		methods: {
			choosemenu(menuindex) {
				this.activeindex = menuindex
				//做一个短暂的延迟保证选中的tab是用户点击的tab
				setTimeout(() => {
					this.lineChange()
				}, 100)
			},
			choosecate(cateindex) {
				console.log(cateindex)
				this.activeindex2 = cateindex
			},
			lineChange() {
				if (this.activeindex) {
					this.positionStyle = {
						left: `${160-60}rpx`
					}
				} else {
					this.positionStyle = {
						left: 0
					}
				}
			},
			handleRevolve() {
				this.$refs.icon.style.transform = 'rotate(720deg)'
				setTimeout(() => {
					this.$refs.icon.style.transform = ''
					clearTimeout()
				}, 1000)
			},
			jump(url) {
				//跳转到指定url
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		width: 750rpx;
		height: 80rpx;
		border-bottom: 1px solid $uni-border-color;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 $uni-spacing-row-lg;

		.nav-left,
		.nav-right {
			width: 50rpx;
			height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.refresh {
			font-size: $uni-font-size-sm*1.5;
			transition: all 2s linear;
		}

		.tab-wrap {
			font-size: $uni-font-size-lg;
			flex-direction: column;
			align-items: center;

			.tab-menu {
				display: flex;
				position: relative;
				width: 160rpx;
				justify-content: space-between;

				>.menu-box {
					display: flex;
					align-items: center;

				}

				.active_menu {
					font-weight: bold;
				}

				.bottom_line {
					width: 60rpx;
					height: 4rpx;
					background-color: #f00;
					position: absolute;
					bottom: -10rpx;
					transition: all .2s linear;
				}
			}



		}
	}

	.cate {
		margin-top: $uni-spacing-col-sm;
		padding: $uni-spacing-col-sm $uni-spacing-row-lg;
		width: 750rpx;
		overflow: hidden;

		.cate-box {
			overflow: hidden;
			white-space: nowrap;
			overflow-x: scroll;

			&::-webkit-scrollbar {
				display: none
			}

			.cate-item {
				display: inline-flex;
				margin-right: $uni-spacing-row-lg*2;
				color: $uni-text-color-grey;
				font-size: $uni-font-size-base;
			}

			.active_cate {
				color: $uni-text-color;
			}
		}
	}

	.waterfalls {
		display: block;
		padding: $uni-spacing-col-base;

		::v-deep .waterfalls-flow-column {
			display: block;

			.column-value-show {
				display: block;

				.inner {
					width: 100%;

					.item {
						width: 100%;
						display: flex;
						flex-direction: column;
						padding: 10rpx 10rpx 20rpx;

						.title {
							display: flex;
							flex-wrap: wrap;
							line-height: 48rpx;
							font-size: 28rpx;
							color: #222;
							font-weight: bold;
							font-size: $uni-font-size-base;
						}

						.desc {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: $uni-font-size-sm;
							color: #666;
							margin-top: $uni-spacing-col-base;

							.userInfo {
								display: flex;
								align-items: center;

								view {
									width: 35rpx;
									height: 35rpx;
									border-radius: 50%;
									overflow: hidden;
									margin-right: $uni-spacing-row-sm;

									image {
										width: 100%;
									}
								}
							}

							.like {
								display: flex;
								align-items: center;
							}
						}
					}
				}



			}
		}

	}
</style>
